<template>
  <div class="app-container kfjzView">
    <el-form ref="form" :model="form" :rules="rules">
      <BorderView title="基本信息" />
      <el-descriptions :column="3" border>
        <el-descriptions-item label="姓名*" label-class-name="labelBg">
          <el-form-item prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="头像" label-class-name="labelBg">
          <imageUpload v-model="form.avatar" list-type="text" :limit="1" />
        </el-descriptions-item>
        <el-descriptions-item label="性别*" label-class-name="labelBg">
          <el-form-item prop="gender">
            <el-select
              v-model="form.gender"
              placeholder="请选择性别"
              style="width: 100%"
            >
              <el-option
                v-for="dict in dict.type.gender"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="民族*" label-class-name="labelBg">
          <el-form-item prop="mz">
            <el-input v-model="form.mz" placeholder="请输入民族" />
          </el-form-item>
        </el-descriptions-item>

        <el-descriptions-item label="身份证号码*" label-class-name="labelBg">
          <el-form-item prop="idno">
            <el-input v-model="form.idno" placeholder="请输入身份证号码" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="出生日期*" label-class-name="labelBg">
          <el-form-item label="" prop="birthday">
            <el-date-picker
              v-model="form.birthday"
              clearable
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择出生日期"
              style="width: 100%"
            />
          </el-form-item>
        </el-descriptions-item>

        <el-descriptions-item label="就业情况*" label-class-name="labelBg">
          <el-form-item prop="jyqk">
            <el-select
              v-model="form.jyqk"
              placeholder="请选择就业情况"
              style="width: 100%"
            >
              <el-option
                v-for="dict in dict.type.jyqk"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>

        <el-descriptions-item label="手机号码*" label-class-name="labelBg">
          <el-form-item label="" prop="mobile">
            <el-input v-model="form.mobile" placeholder="请输入手机号码" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="婚姻状况*" label-class-name="labelBg">
          <el-form-item prop="hyzk">
            <el-select
              v-model="form.hyzk"
              placeholder="请选择婚姻状况"
              style="width: 100%"
            >
              <el-option
                v-for="dict in dict.type.hyzk"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="入所日期*" label-class-name="labelBg">
          <el-form-item prop="rsrq">
            <el-date-picker
              v-model="form.rsrq"
              clearable
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择出生日期"
              style="width: 100%"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="出所日期*" label-class-name="labelBg">
          <el-form-item label="" prop="csrq">
            <el-date-picker
              v-model="form.csrq"
              clearable
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择出生日期"
              style="width: 100%"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="负责人*" label-class-name="labelBg">
          <el-form-item label="" prop="fzr">
            <user-member-select v-model="form.fzr" placeholder="请选择负责人"/>
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
      <BorderView title="康复救助站中心相关信息" />
      <el-descriptions :column="1" border>
        <el-descriptions-item label="所属救助中心*" label-class-name="labelBg">
          <el-row :gutter="40">
            <el-col :span="10">
              <el-form-item prop="kfjzzx">
                <el-select
                  v-model="form.kfjzzx"
                  placeholder="请选择康复救助中心"
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in kfjzzxList"
                    :key="dict.kfjzzxId"
                    :label="dict.name"
                    :value="dict.kfjzzxId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
<!--              <el-button type="primary">新增康复中心</el-button>-->
            </el-col>
          </el-row>

        </el-descriptions-item>
        <el-descriptions-item label="送至人员*" label-class-name="labelBg">
          <el-form-item prop="szry">
            <el-input v-model="form.szry" placeholder="请输入送至人员" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="送至单位*" label-class-name="labelBg">
          <el-form-item label="" prop="szdw">
            <el-input v-model="form.szdw" placeholder="请输入送至单位" />
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
      style="text-align: right; margin-top: 20px"
    >
      <el-button @click="cancel">重置</el-button>
      <el-button
        :loading="buttonLoading"
        type="primary"
        @click="submitForm"
      >保存</el-button>
    </div>
  </div>
</template>
<script>
import BorderView from '@/views/components/BorderTitleView/index.vue'
import {
  getUser,
  addUser,
  updateUser
} from '@/api/user/userInfo'
import {queryList} from "@/api/place/kfjzzx";
export default {
  dicts: [
    'hyzk',
    'sys_yes_no',
    'gender',
    'jyqk'

  ],
  components: {
    BorderView
  },

  data() {
    return {
      kfjzzxList: [],
      kfjzId: '',
      buttonLoading: false,
      // 表单参数
      form: {
        type: '19'
      },
      // 表单校验
      rules: {
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        idno: [
          { required: true, message: '身份证号码不能为空', trigger: 'blur' }
        ],
        gender: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
        mz: [{ required: true, message: '名族不能为空', trigger: 'blur' }],
        birthday: [
          { required: true, message: '出生日期不能为空', trigger: 'blur' }
        ],
        hyzk: [
          { required: true, message: '婚姻状况不能为空', trigger: 'blur' }
        ],
        jyqk: [
          { required: true, message: '就业情况不能为空', trigger: 'blur' }
        ],
        mobile: [{ required: true, message: '电话不能为空', trigger: 'blur' },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        rsrq: [
          { required: true, message: '入所日期不能为空', trigger: 'blur' }
        ],
        csrq: [
          { required: true, message: '出所日期不能为空', trigger: 'blur' }
        ],
        kfjzzx: [
          { required: true, message: '康复救助中心不能为空', trigger: 'blur' }
        ],
        szry: [
          { required: true, message: '送至人员不能为空', trigger: 'blur' }
        ],
        fzr: [
          { required: true, message: '负责人不能为空', trigger: 'blur' }
        ],
        szdw: [
          { required: true, message: '送至单位不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    kfjzId: {
      immediate: true,
      handler(newV) {
        if (newV) {
          getUser(newV).then((res) => {
            if (res.data) {
              this.form = res.data
            } else {
              this.reset()
            }
          })
        }
      }
    }
  },
  mounted() {
    this.kfjzId = this.$route.query.kfjzId
    queryList().then(res=> {
      this.kfjzzxList = res.data
    })
  },
  methods: {
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          if (this.form.id != null) {
            updateUser(this.form)
              .then((response) => {
                this.$modal.msgSuccess('修改成功')
                this.$router.back()
              })
              .finally(() => {
                this.buttonLoading = false
              })
          } else {
            addUser(this.form)
              .then((response) => {
                this.$modal.msgSuccess('新增成功')
                this.$router.back()
              })
              .finally(() => {
                this.buttonLoading = false
              })
          }
        }
      })
    },
    // 取消按钮
    cancel() {
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        type: '19',
        id: undefined,
        name: undefined,
        idno: undefined,
        gender: undefined,
        mz: undefined,
        birthday: undefined,
        hyzk: undefined,
        jyqk: undefined,
        mobile: undefined,
        fzr: undefined,
        rsrq: undefined,
        csrq: undefined,
        kfjzzx: undefined,
        szry: undefined,
        szdw: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined
      }
      this.resetForm('form')
    }
  }
}
</script>
<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 16px;
  color: #8c939d;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.avatar {
  width: 40px;
  height: 40px;
  display: block;
}
</style>
<style>
.labelBg {
  background: rgb(241, 243, 244) !important;
  color: #000 !important;
  width: 200px;
}
</style>
<style scoped>
.kfjzView .el-input__wrapper {
  border: none !important;
  box-shadow: none !important;
  padding: 0px;
}
.kfjzView /deep/ .el-input__inner {
  border: none !important;
}
.kfjzView /deep/ .el-form-item {
  margin-bottom: 0;
}
</style>
